// window.addEventListener("load", function () {

// -   数据渲染（数组中有对象）
// -   点击删除的时候  
//     +   当前点击的这条数据 从数组中删除
//     +   在渲染页面   
// -   点击加减数量的时候
//     +   操作 数组中对应数据
//     +   在渲染页面


//第一步：渲染数据
//首先先找到一个不重新渲染的父元素，用于渲染结构和数据
let shopS = document.querySelector(".shopS")
render(lists)

//第二步：给shopS添加事件 事件委托
shopS.addEventListener("click", function (e) {
  e = e || event
  switch (e.target.className) {
    case "del":
      let res = confirm("你确定要删除吗？")
      if (res) {
        let preTr0 = e.target.parentNode.parentNode //当前行
        let preIdx0 = preTr0.getAttribute('idx') //当前行的id
        //遍历原始数组，找到这个索引号号，然后截取掉
        lists.forEach((items, i) => {
          if (items.id == preIdx0) {
            lists.splice(i, 1)
            render(lists)
          }
        });
      }
      break;
    case "add":
      let preTr1 = e.target.parentNode.parentNode //当前行
      let preIdx1 = preTr1.getAttribute('idx') //当前行的id
      //遍历原始数组，找到这个索引号对应的行，然后 对表单的值++
      lists.forEach((items, i) => {
        if (items.id == preIdx1) {
          // console.log(items);
          items.num += 1
          render(lists)
        }
      })
      break
    case "reduce":
      let preTr2 = e.target.parentNode.parentNode //当前行
      let preIdx2 = preTr2.getAttribute('idx') //当前行的id
      //遍历原始数组，找到这个索引号对应的行，然后 对表单的值--
      lists.forEach((items, i) => {
        if (items.id == preIdx2) {
          // console.log(items);
          items.num -= 1
          if (items.num <= 1) {
            items.num = 1
          }
          render(lists)
        }
      })
      break
  }

})

//渲染函数
function render(data) {
  shopS.innerHTML = lists.map((items, i) => {
    return `
    <tr class="shopList" idx="${items.id}">
                <td class="imgTd"><img class="shops" src="${items.img}" alt="" srcset=""></td>
                <td class="titleTd">
                    <h6>${items.title}</h6>
                    <span>ID:#${items.id}</span>
                    <span>Size:${items.size}</span>
                </td>
                <td class="Son2">
                    <span class="reduce">-</span>
                    <input type="text" value="${items.num}" class="count">
                    <span class="add">+</span>
                </td>
                <td class="Son3">
                    <del class="oriPrice">${items.oriPrice} py6</del>
                    <b class="nowPrice">${items.nowPrice} py6</b>
                </td>
                <td class="Son4">
                    <span class="priceAll">${(items.num*items.nowPrice ).toFixed(2)} py6</span>
                    <span class="saveAll">You save ${(items.num*(items.oriPrice -items.nowPrice ) ).toFixed(2)} py6</span>
                </td>
                <td class="Son5">
                    <img class="del" src="../images/del.png" alt="">
                </td>
            </tr> 
    `
  }).join("")

  // 计算总价：
  let cartall0 = document.querySelector(".cartall")
  let cartaAll0 = lists.reduce((pre, cur) => {
    // console.log(cur.nowPrice * cur.num);
    return pre + cur.nowPrice * cur.num
  }, 0)
  // console.log(cartall0.children[0].innerHTML);//1929.45&nbsp;py6.
  cartall0.children[0].innerHTML = `${cartaAll0.toFixed(2)}&nbsp;py6.`
  //计算总优惠
  let savetall = document.querySelector(".savetall")
  let savetAll0 = lists.reduce((pre, cur) => {
    return pre + cur.num * (cur.oriPrice - cur.nowPrice)
  }, 0)
  // console.log(savetAll0.toFixed(2));
  savetall.innerHTML = `Your Total Saving:${savetAll0.toFixed(2)} py6.`
}



// let shopS = document.querySelector(".shop .shopS") //tbody 商品盒子
// //第一步：渲染数据
// render(lists)

// //功能1：删除按钮 不渲染的父元素！
// let Son5 = document.querySelectorAll(".Son5")

// shopS.addEventListener("click", function (e) {
//   switch (e.target.className) {
//     //功能1：删除按钮
//     case "del": //删除事件
//       let res = confirm("你确定要删除吗？")
//       if (res) {
//         let preTr1 = e.target.parentNode.parentNode //当前行
//         let idx1 = preTr1.getAttribute('idx') //当前行的id
//         //遍历数组中的数据，然后根据id来截取
//         lists.forEach((items, i) => {
//           // console.log(idx, items.id);
//           if (idx1 == items.id) {
//             lists.splice(i, 1)
//             render(lists)
//           }
//         });
//       }
//       break
//       //功能2：增加按钮
//     case "add":
//       let preTr2 = e.target.parentNode.parentNode //当前行
//       let idx2 = preTr2.getAttribute('idx') //当前行的id  
//       //根据idx遍历出当前行，并且给表单的num++
//       lists.forEach((items, i) => {
//         if (idx2 == items.id) {
//           items.num += 1 //拿到表单的值 然后每点击一次 就++
//           render(lists);
//         }
//       })
//       break

//     case "reduce":
//       let preTr3 = e.target.parentNode.parentNode //当前行
//       let idx3 = preTr3.getAttribute('idx') //当前行的id  
//       lists.forEach((items, i) => {
//         if (items.id == idx3) {
//           items.num -= 1;
//           if (items.num <= 1) {
//             items.num = 1
//           }
//           render(lists);
//         }
//       })
//       break
//   }

// })









// //渲染函数
// function render(lists) {
//   shopS.innerHTML = lists.map(function (items, i) {
//     // console.log(items);//每一个数组元素 也就是对象
//     let total = (items.num * items.nowPrice).toFixed(2)
//     return `
//     <tr class="shopList" idx="${items.id}">
//       <td class="imgTd"><img class="shops" src="${items.img}" alt="" srcset=""></td>
//       <td class="titleTd">
//           <h6>${items.title}</h6>
//           <span>ID:#${items.id}</span>
//           <span>Size:${items.size}</span>
//       </td>
//       <td class="Son2">
//           <span class="reduce">-</span>
//           <input type="text" value="${items.num}" class="count">
//           <span class="add">+</span>
//       </td>
//       <td class="Son3">
//           <del class="oriPrice">${items.oriPrice} py6</del>
//           <b class="nowPrice">${items.nowPrice} py6</b>
//       </td>
//       <td class="Son4">
//           <span class="priceAll">${total} py6</span>
//           <span class="saveAll">You save ${(items.oriPrice*items.num - items.nowPrice*items.num).toFixed(2)} py6</span>
//       </td>
//       <td class="Son5">
//           <img class="del" src="../images/del.png" alt="">
//       </td>
//     </tr>
//       `
//   }).join('')

//   //计算总价 操作数据
//   let cartall = document.querySelector(".cartall")
//   let cartaAl = lists.reduce((pre, cur) => {
//     return pre + cur.nowPrice * cur.num
//   }, 0)
//   // console.log(cartaAl.toFixed(2));//总价格 cartaAl.toFixed(2)
//   // console.log(cartall.children[0].innerHTML); //总价的内容 -- 1929.45&nbsp;py6.
//   cartall.children[0].innerHTML = cartaAl.toFixed(2) + "&nbsp;py6."

//   //计算总优惠了多少钱
//   let savetall0 = document.querySelector(".savetall")

//   let savetAll0 = lists.reduce((pre, cur) => {
//     return pre + cur.oriPrice * cur.num - cur.nowPrice * cur.num
//   }, 0)
//   // console.log(savetAll0.toFixed(2));//价格

//   savetall0.innerHTML = `Your Total Saving:${savetAll0.toFixed(2)} py6.`
// }